<template>
  <div class="wap-container manRequestHandle" id="container">
    <section class="top bgfff">
      <div class="standard-info">
        <ul class="pl10 pb15">
          <li class="rowflex">
            <div class="info-item c666 ">联系人</div>
            <div v-if="workOrderTypeInfo.serviceType == 'OUT'">{{requestInfo.linkMan}}</div>
            <div v-if="workOrderTypeInfo.serviceType == 'IN'">{{requestInfo.engineer.nickName}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666">联系电话</div>
            <div v-if="workOrderTypeInfo.serviceType == 'OUT'">{{requestInfo.linkPhone}}</div>
            <div v-if="workOrderTypeInfo.serviceType == 'IN'">{{requestInfo.engineer.mobile}}</div>

          </li>
          <li class="rowflex" v-if="requestInfo.county">
            <div class="info-item c666">区县</div>
            <div>{{requestInfo.county}}</div>
          </li>
          <li class="rowflex" v-if="requestInfo.customer">
            <div class="info-item c666 " >服务对象</div>
            <div>{{requestInfo.customer.customerName}}</div>
          </li>
          <li class="rowflex" v-if="false">
            <div class="info-item c666 ">设备编号</div>
            <div>{{requestInfo}}</div>
          </li>
          <li class="rowflex">
            <div class="info-item c666 " v-if="workOrderTypeInfo.serviceType == 'OUT'">故障描述</div>
            <div class="info-item c666 " v-if="workOrderTypeInfo.serviceType == 'IN'">任务描述</div>
            <div class="errorDescription">{{requestInfo.errorDescription}}</div>
          </li>
          <li class="rowflex" v-if="picList.length > 0">
            <div class="info-item c666">故障照片</div>
            <div class="pic-box">
              <div class="pics rowflex">
                <div @click="show(index)" v-for="(item,index) in picList" class="picItem previewer-img" v-bind:style="{backgroundImage: 'url(http://'+item+')', backgroundSize: 'cover' }"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </section>
    <div class="btn-box">
      <div @click="finishRequest">处理完成</div>
      <div @click="handleRequest">继续处理</div>
    </div>
    <div v-transfer-dom>
      <previewer :list="bigImgPath" ref="previewer" :options="options"></previewer>
    </div>
  </div>
</template>

<script>
  import {TransferDom, Previewer} from 'vux'
  export default {
    name: "ManRequestHandle",
    components: {Previewer},
    directives: {
      TransferDom
    },
    data() {
      return{
        requestInfo: {},
        workOrderTypeInfo: {},
        picList: [],
        bigImgPath: [],
        //图片预览
        options: {
          getThumbBoundsFn(index) {
            let thumbnail = document.querySelectorAll('.manRequestHandle .previewer-img')[index]
            let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
            let rect = thumbnail.getBoundingClientRect()
            return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
          }
        },
      }
    },
    mounted() {
      console.log(1)
      //this.requestInfo = this.$route.query.requestId
      // /work/api/request/
      this.$http.get('/work/api/request/'+ this.$route.query.requestId).then(res=>{
        this.requestInfo = res.data.data
        this.workOrderTypeInfo = this.requestInfo.workOrderType
        if (this.requestInfo.repairFileStore) {
          let key = this.requestInfo.repairFileStore
          this.$http.get('/work/api/upload/byid?ids='+key).then(res=>{
            let result = res.data.data[key]
            for (var i = 0 ; i < result.length; i++){
              this.picList.push(result[i].path)
            }
            //如果有多张则在预览图中显示
            this.bigImgPath = res.data.data[key].map(item => {
              return {msrc: this._getPathNo(item.path), src:this._getPathNo(item.path)}
            })
          })
        }
      })
    },
    methods: {
      finishRequest: function () {
          let data = {
            status: 1
          }
          this.$http.put('/work/api/request/' + this.requestInfo.id + '/status', data).then(res => {
            this.$router.push({path: '/management/manOrderHome'})
          })
      },
      handleRequest: function () {
        if (this.requestInfo.workOrderType.serviceType == 'OUT') {
          this.$router.push({path: '/management/manCreatedOrder', query: {requestInfo: this.requestInfo}})
        } else if (this.requestInfo.workOrderType.serviceType == 'IN') {
          this.$router.push({path: '/management/manCreatedInOrder', query: {requestId: this.requestInfo.id}})
        }
      },
      //图片预览
      show(index) {
        console.log(index)
        this.$refs.previewer.show(index)
      },
      showBig() {
        this.showBigPicture = !this.showBigPicture;
      },
    }
  }
</script>

<style lang="less">
  .manRequestHandle{
    font-size: 0.13rem;
    box-sizing: border-box;
    .top{
      font-size: 0.1rem;
    }
    .standard-info{
      font-size: 0.15rem;
      border-bottom: solid 1px #ebebeb;
    }
    .standard-info ul{
      border-bottom: solid 1px #eee;
      padding-top: 0.01rem;
    }
    .standard-info ul li{
      margin-top: 0.1rem;
    }
    .standard-info .info-item{
      width: 0.75rem;
    }
    .errorDescription{
      width: 2.75rem;
    }
    .pic-box{
      width: 70%;
    }
    .pics{
      overflow-x: auto;
    }
    .picItem{
      width: 1.3rem;
      height: 0.85rem;
      margin-right: 0.05rem;
      margin-top: 0.04rem;
      -webkit-border-radius: 0.025rem;
      -moz-border-radius: 0.025rem;
      border-radius: 0.025rem;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .btn-box{
      display: flex;
      margin-top: 0.4rem;
      margin-left: 0.15rem;
      div{
        width: 0.8rem;
        height: 0.3rem;
        background-color: #42a3fd;
        line-height: 0.3rem;
        text-align: center;
        color: #fff;
        margin-right: 0.4rem;
        border-radius: 0.04rem;
      }
    }
  }
</style>
